<template>
    <div>
        <van-field :value="pValue" placeholder="请选择" readonly @click="showArea = true">
            <template #label>
                <span class="isStars" v-if="required">*</span>
                <span>{{ itemLabel }}</span>
            </template>
        </van-field>
        <van-popup v-model="showArea" round position="bottom">
            <van-cascader v-model="cascaderValue" title="请选择所在地区"
            :options="dataList" @change="loadData"
            @close="show = false" @finish="onFinish" />
        </van-popup>
    </div>
</template>

<script>
    import {  queryArea } from "@/api/common";
    export default {
        model: {
            prop: 'pValue',  // 接受父值，用于显示
            event: 'eValue', // 传给父的标记
        },
        props: {
            pValue: {
                type: String,
			    default: ''
            },
            required: {
                type: Boolean,
                default: false,
            },
            itemLabel: {
                type: String
            }
        },
        components: {

        },
        data () {
            return {
                showArea: false, // 城市
                cascaderValue: '',
                dataList: [],// 
            };
        },
        created () {},
        computed: {},
        mounted () {},
        watch: {},
        methods: {
            // 获取地址树
            getInitTree() {
                queryArea("", "1").then((res) => {
                    if (res.code == "1000") {
                    let data = res.data;
                    data = this.operationTree(data);
                    this.dataList = data;
                    }
                });
            },
            // 处理地址树
            operationTree(arr) {
                let arrData = [];
                arr.forEach((item) => {
                    if (item.areaLevel > 2) {
                    arrData.push({
                        value: item.areaCode,
                        text: item.areaName,
                    });
                    } else {
                    arrData.push({
                        value: item.areaCode,
                        text: item.areaName,
                        level: item.areaLevel,
                        children: [],
                    });
                    }
                });
                return arrData;
            },
            // 切换地区
            loadData(item) {
                item.loading = true;
                queryArea(item.value, Number(item.level) + 1).then((res) => {
                    item.loading = false;
                    if (res.code == "1000") {
                    let data = res.data;
                    data = this.operationTree(data);
                    if (item.tabIndex == 0) {
                        item.selectedOptions[0].children = data;
                    } else {
                        item.selectedOptions[1].children = data;
                    }
                    }
                });
            },
            // 全部选项选择完毕后，会触发 finish 事件
            onFinish(item) {
                this.$emit("eValue", item.selectedOptions[2].value);
                this.showArea = false;
            },
        }
    };
</script>

<style scoped lang="less">
.isStars {
    color: red !important;
    margin-right: 6px;
}
</style>